<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8"/>
  <title>临池书法</title>
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="/public/libs/bootstrap/css/bootstrap.min.css">

  <!-- 可选的Bootstrap主题文件（一般不用引入） -->
  <link rel="stylesheet" href="/public/libs/bootstrap/css/bootstrap-theme.min.css">

  <link rel="stylesheet" href="/public/stylesheets/animate.min.css"/>

  <link href="/public/javascripts/viewer/viewer.css" rel="stylesheet">

  <link rel="stylesheet/less" type="text/css" href="/public/stylesheets/styles-bootcss.less">

  <script src="/public/javascripts/less.min.js"></script>

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="/public/javascripts/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="/public/libs/bootstrap/js/bootstrap.min.js"></script>

  <script src="/public/javascripts/viewer/viewer.js"></script>

  <script>
    $(document).ready(function () {
      $('.images').viewer({
        title: false,
        navbar: false,
        url: 'data-original'
      });

      $('.btn-comment,.comment>.comment-list>li').click(function () {
        var $this = $(this);
        var tid = $this.closest('li').attr('data-topic');
        if (!tid) {
          tid = $this.attr('data-tid');
          $('#at-rid').val($this.attr('data-rid'));
          $('#at-uid').val($this.attr('data-uid'));
        }
        $('#at-tid').val(tid);
        var user = $this.attr('data-user');
        var top = $this.offset().top - 60;
        $('.con-dialog').removeClass("hide").offset({
          top: top
        });
        if (!$('.con-dialog').hasClass('hide')) {
          var left = $('.con-dialog').width() / 2;
//                    $('.index-container').css('margin-left','100px');
          $('.index-container').animate({
            left: -left
          }, 'fast');
          $('.at-user').html(user);
        }
      });
      $('.comment-panel>.header>.close').click(function () {
        var left = $('.con-dialog').width() / 2;
        $('.con-dialog').addClass('hide');
        $('.index-container').animate({
          left: 0
        }, 'fast');
        $('#at-tid').val('');
        $('#at-rid').val('');
        $('#at-uid').val('');
        $('#txtComment').text('');
      });
      $("#txtComment").keydown(function (event) {
        if (event.shiftKey && event.keyCode == 13) {

        } else if (event.keyCode == 13) {
          var tid = $('#at-tid').val();
          var rid = $('#at-rid').val();
          var uid = $('#at-uid').val();
          $.post('/' + tid + '/reply', {
            tid: tid,
            txt: $('#txtComment').html(),
            rid: rid,
            uid: uid
          }, function (d) {
            location.reload();
          });
          return false;
        }
      });

      $('.favorite').click(function (e) {
        var $this = $(this);
        var tid = $this.closest('li').attr('data-topic');
        $.ajax({
          url: '/topic/' + tid + '/up',
          method: 'POST',
        }).done(function (data) {
          if (data.success) {
            var currentCount = Number($this.next('.favorite-count').text().trim()) || 0;
            if (data.action === 'up') {
              $this.next('.favorite-count').text(currentCount + 1);
              $this.addClass('favorited');
            } else {
              if (data.action === 'down') {
                $this.next('.favorite-count').text(currentCount - 1);
                $this.removeClass('favorited');
              }
            }
          } else {
            alert(data.message);
          }
        }).fail(function (xhr) {
          if (xhr.status === 403) {
            alert('请先登录，登陆后即可点赞。');
          }
        });
      });

    });
  </script>
</head>

<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top ">
  <div class="container shufa-nav">
    <a class="navbar-brand" href="/"><strong>墨香兰亭</strong></a>

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="/?tab=all">发现</a></li>
        <li><a href="/about">关于</a></li>
      </ul>
      <%if(currentUser){%>
      <div class="pull-right nav-container-right">
        <img class="img-user" src="<%= currentUser.avatar %>">
      </div>
      <div class="pull-right shufa-btn-login">
        <a href="/topic/create">发布</a>
      </div>
      <%}else{%>
      <div class="pull-right shufa-btn-login">
        <a href="/signin">登录</a>
      </div>
      <%}%>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>
<div class="container">
  <%if(currentUser){%>
  <div class="user-dialog pull-right hide">
    <div class="user-panel">
      <div class="triangle"></div>
      <div class="body">
        <div class="user-info">
          <div class="profile"><img src="<%= currentUser.avatar %>"></div>
          <p><span><%= currentUser.name %></span></p>

          <p><span><%= currentUser.email %></span></p>
        </div>
        <hr/>
        <ul>
          <li><a>我的作品</a></li>
          <li><a href="/profile">账号设置</a></li>
          <li><a>帮助中心</a></li>
          <li><a href="/signout">退出登录</a></li>
        </ul>
      </div>
    </div>
  </div>
  <%}%>

  <div class="index-container">
    <div class="index-left">
      <div class="con-menu">

      </div>
    </div>
    <div class="index-right">
      <div class="index-body">

        <!--<div class="con-header ">-->
          <!--<div class="img-box">-->
            <!--<img class="content" src="/public/images/Rectangle.png">-->
          <!--</div>-->
          <!--<img class="user" src="/public/images/text.png"/>-->
        <!--</div>-->
        <div class="con-content">
          <ul class="clearTop">

            <li class="con-item" data-topic="<%= topic._id %>">
              <div class="item-user"><img src="<%= topic.author.avatar_url %>"></div>
              <div class="item-content">
                <h3 class="user"><a href="#"><%= topic.author.name %></a></h3>
                <!--<div class="detail pull-right"><a href="#">查看详情</a></div>-->

                <p class="text"><%- topic.content %></p>

                <div class="images">
                  <% if(topic.images && topic.images.length==1){
                  var width = parseInt(topic.images[0].width);
                  var height =parseInt(topic.images[0].height);
                  %>
                  <ul>
                    <% if( width > height ){ %>
                    <li class="img-box-1-horizontal">
                      <img class="img-size-1-horizontal"
                           data-original="//<%= topic.images[0].url %>"
                           src="//<%= topic.images[0].url %>?imageView2/1/w/256/h/192">
                    </li>
                    <% }else{ %>
                    <li class="img-box-1-vertical">
                      <img class="img-size-1-vertical"
                           data-original="//<%= topic.images[0].url %>"
                           src="//<%= topic.images[0].url %>?imageView2/1/w/192/h/256">
                    </li>
                    <% } %>
                  </ul>
                  <% }else{ %>
                  <ul class="clearfix img-box-x-p<%= topic.images.length %>">
                    <% topic.images.forEach(function(image){ %>
                    <li class="img-box-x">
                      <img class="img-siez-x" data-original="//<%= image.url %>"
                           src="//<%= image.url %>?imageView2/1/w/128/h/128">
                    </li>
                    <% }) %>
                  </ul>
                  <% } %>
                </div>
                <% var isUped = is_uped ? "favorited":"" %>
                <p class="more"><span class="favorite <%= isUped %>"></span>
                  <font class="favorite-count"><%= topic.ups.length||0 %></font><span
                          class="btn-comment"
                          data-user="<%= topic.author.name %>"><img
                          src="/public/images/more.png"></span></p>
                <% if(topic.replies && topic.replies.length>0){%>
                <div class="comment">
                  <div class="triangle"></div>
                  <% if(topic.ups && topic.ups.length>0){%>
                  <div class="favorite-list">
                    <% topic.ups.forEach(function(){%>
                    <span>令狐冲,阿紫</span>
                    <%})%>
                  </div>
                  <% } %>
                  <ul class="comment-list">
                    <% topic.replies.forEach(function(reply){ %>
                    <li data-tid="<%= topic._id%>" data-rid="<%= reply._id%>"
                        data-remove="<%= currentUser?currentUser._id+''==reply.author._id+'':false %>"
                        data-uid="<%= reply.author._id %>"
                        data-user="<%= reply.author.name %>"><span><span class="author"><%= reply.author.name %></span><% if(reply.toAuthor){%>@<span
                            class="author"><%= reply.toAuthor.name %></span><%}%> :</span> <span><%- reply.content %></span>
                    </li>
                    <%})%>
                  </ul>
                </div>
                <% } %>
              </div>
            </li>

          </ul>
        </div>
      </div>
      <div class="con-dialog hide">
        <div class="comment-panel">
          <div class="header">
            <span><strong>评论</strong></span>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
          </div>
          <div class="body">
            <div class="triangle"></div>
            <span>@<span class="at-user"></span></span>
            <input type="hidden" id="at-tid">
            <input type="hidden" id="at-type">
            <input type="hidden" id="at-rid">
            <input type="hidden" id="at-uid">

            <div id="txtComment" name="note" class="input-adaptive" contenteditable="plaintext-only"
                 placeholder="按Enter发送，Shift+Enter换行"></div>
          </div>
        </div>
      </div>
    </div>
  </div>


</div>
<script type="text/javascript" src="/public/javascripts/pin/jquery.pin.min.js"></script>
<script>
  $(document).ready(function () {
    $('.img-user').click(function () {
      $('.user-dialog').toggleClass('hide');
    })
  });
</script>
</body>
</html>